<template>
  <view style="height: 100%">
    <view style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80vh; padding: 30rpx">
      <view class="ico-box">
        <image v-if="loading" key="image-1" class="ico" src="/static/web/images/ico_state_wait.svg" mode="scaleToFill"></image>
        <image v-else-if="state" key="image-2" class="ico" src="/static/web/images/ico_state_succeed.svg" mode="scaleToFill"></image>
        <image v-else key="image-3" class="ico" src="/static/web/images/ico_state_fail.svg" mode="scaleToFill"></image>
      </view>
      <view class="title-box">
        <text class="" :style="{ color: defThemeColor.text }"></text>
        <text v-if="loading" key="title-1" class="title" style="color: #e6a23c">查询结果中</text>
        <text v-else-if="state" key="title-2" class="title" style="color: #67c23a">支付成功</text>
        <text v-else key="title-3" class="title" style="color: #f56c6c">支付失败</text>
      </view>
      <view v-if="state && !loading" class="price-box">
        <text class="price" :style="{ color: defThemeColor.text }">¥111.10</text>
      </view>
      <view v-if="!loading" key="view-2" style="width: 500rpx">
        <mxp-button v-if="dramaId" key="mxp-button-1" text="去解锁剧集" :cusStyle="{ marginTop: '30px' }" @click="openBusinessPage"></mxp-button>
        <mxp-button v-else key="mxp-button-2" text="查看记录" :cusStyle="{ marginTop: '30px' }" @click="openBusinessPage"></mxp-button>
        <mxp-button text="返回首页" :plain="true" :cusStyle="{ marginTop: '20px' }" @click="openHome"></mxp-button>
      </view>
      <view class="loading">
        <view class="top"></view>
        <view class="bottom"></view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad } from '@dcloudio/uni-app';
  import MxpButton from '@/mxp-ui/mxp-button/mxp-button.vue';
  import { ref } from 'vue';
  import { defThemeColor } from '@/mxp-ui/mxp-tool/theme/theme';
  import { queryWebPayResultAxios } from '@/api/pay';
  import { sleep } from '@/mxp-ui/mxp-tool/utils/rest';

  const dramaTitle = ref('');
  const episodeSeq = ref<number | ''>('');
  const episodeId = ref<number | ''>('');
  const dramaId = ref<number | ''>('');
  const loading = ref(true);
  const state = ref(true);
  const outTradeNo = ref('');

  onLoad((op: any) => {
    outTradeNo.value = String(op?.out_trade_no || '');
    getWebPayResultAxios();
  });

  /** 返回首页 */
  function openHome() {
    uni.switchTab({ url: '/pages/tab-bar/index1/index1' });
  }

  /** 打开相关业务页面 */
  function openBusinessPage() {
    let url = '';
    if (dramaId.value) {
      url = `/pages/drama/playlet-public/playlet-public?dramaId=${dramaId.value}&episodeId=${episodeId.value}&episodeSeq=${episodeSeq.value}`;
    } else {
      url = '/pages/personal/savings-records/savings-records';
    }
    uni.reLaunch({ url });
  }
  /** 得到数据 */
  async function getWebPayResultAxios() {
    try {
      await sleep(1000);
      loading.value = true;
      const res = await queryWebPayResultAxios({ outTradeNo: outTradeNo.value });
      dramaTitle.value = res.data.dramaTitle || '';
      dramaId.value = res.data.dramaId || '';
      episodeSeq.value = res.data.episodeSeq || '';
      episodeId.value = res.data.episodeId || '';

      loading.value = false;
      if (res.data.status === 1) {
        state.value = true;
      } else {
        state.value = false;
      }
    } catch (error) {
      loading.value = false;
      state.value = false;
    }
  }
</script>

<style lang="scss" scoped>
  .ico-box {
    padding-bottom: 15px;

    .ico {
      width: 90px;
      height: 90px;
    }
  }

  .title-box {
    padding-top: 4px;

    .title {
      font-size: 18px;
      font-weight: bolder;
    }
  }

  .price-box {
    padding-top: 10px;

    .price {
      font-size: 42px;
      font-weight: bolder;
      line-height: 42px;
      color: #000000;
    }
  }

  .hint-box {
    width: 450rpx;
    padding: 0 30rpx;
    margin-top: 8px;
    text-align: center;

    .hint {
      font-size: 14px;
      color: #666666;
      text-align: center;
    }
  }
</style>
